<template>
	<view>
		<view style="text-align: center;">
			<image class="logo" style="text-align: center;" src="/static/images/others/favicon.png"></image>
		</view>
		<view class="text-xxl des">接收本公众号消息授权</view>
		<view class="content">
			<om-wing-blank>
				<view v-if="failOpenidMsg">
					<view class="flex bg-red light radius padding text-lg" v-html="failOpenidMsg"></view>
				</view>
				<view v-else-if="hasBindMsg">
					<view class="flex bg-red light radius padding text-lg" v-html="hasBindMsg"></view>
				</view>
				<view v-else-if="successMsg">
					<view class="flex bg-green light radius padding text-lg" v-html="successMsg"></view>
				</view>
				<view v-else-if="canBind">
					<view class="input-group" style="margin-top: 10px;">
						<view class="cu-form-group">
							<text class="title">手机号</text>
							<m-input class="m-input" type="text" clearable :focus="mobileFocus" v-model="mobile"
								placeholder="请输入手机号"></m-input>
						</view>
						<view class="cu-form-group">
							<view class="title">验证码</view>
							<m-input class="m-input" type="text" clearable v-model="verifyCode"
								placeholder="请输入验证码"></m-input>
							<view v-if="seconds" class='cu-tag round bg-grey'>{{seconds}}s</view>
							<button v-else class='cu-btn shadow' :class="[bgColor]"
								@click="getVerifyCode">获取验证码</button>
						</view>
					</view>
					<view class="btn-row" style="margin-top: 0;">
						<button type="primary" class="primary om-btn-color" @tap="bindLogin">提交</button>
					</view>
					<view v-if="!!failMsg" class="flex align-center bg-red light radius padding text-lg"
						v-html="failMsg"></view>
				</view>
				
			</om-wing-blank>
		</view>

	</view>
</template>

<script>
	import {
		ignoreHtml,
		getUrl,
		errorModal,
		errorToast,
		successToast
	} from 'static/js/common.js'
	const form = require("@/static/js/formValidation.js")
	export default {
		data() {
			return {
				openid: '',
				mobile: '',
				verifyCode: '',
				mobileFocus: false,
				failOpenidMsg: '',
				hasBindMsg: '',
				failMsg: '',
				successMsg: '',
				canBind:false,
				interval: null,
				seconds:0
			};
		},
		onLoad(e) {
			uni.setNavigationBarTitle({
				title: "企业数字运营管理"
			})
			let _that = this;
			_that.openid = e.openid;
			if (!_that.openid) {
				_that.failOpenidMsg = '参数异常，openid为空';
			}
			_that.verify();
		},
		onShow() {},
		methods: {
			dumiao() {
				let _that = this
				_that.interval = setInterval(function() {
					if (_that.seconds && _that.seconds > 0) {
						_that.seconds -= 1
					} else if (_that.interval) {
						clearInterval(_that.interval);
					}
				}, 1000)
			},
			getVerifyCode() {
				let _that = this;
				let formData = { mobile: _that.mobile, openid: _that.openid };
				let rules = [
					{ name: "openid", rule: ["required"], msg: ["openid不能为空"] },
					{ name: "mobile", rule: ["required", "isMobile"], msg: ["请输入手机号", "请输入正确的手机号码"] },
				];
				let msg = form.validation(formData, rules);
				if (msg) {
					errorToast(msg);
					return
				}
				_that.om.request('wechatMp/getVerifyCode', formData, 'GET').then(res => {
					if (res.succeed) {
						if (res.value) {
							_that.seconds = 60;
							_that.dumiao();
							successToast("发送成功！");
						} else {
							errorModal(null, "错误提示", "发送失败！");
						}
					} else {
						errorModal(null, "错误提示", res.msg);
					}
				})
			},
			/**
			 * 验证是否绑定手机号
			 */
			verify() {
				let _that = this;
				if (!_that.openid) {
					return
				}
				_that.om.request('wechatMp/verifyOpenid', { openid: _that.openid }).then(res => {
					if (res.succeed) {
						if (res.value) {
							_that.mobileFocus = false;
							_that.hasBindMsg = '您的手机号已绑定！';
							_that.canBind = false;
						} else {
							_that.mobileFocus = true;
							_that.hasBindMsg = '';
							_that.canBind = true;
						}
					} else {
						_that.canBind = false;
						_that.mobileFocus = true;
						_that.hasBindMsg = res.msg;
					}
				})
			},
			bindLogin() {
				let _that = this;
				let formData = { mobile: _that.mobile, verifyCode: _that.verifyCode, openid: _that.openid };
				let rules = [
					{ name: "openid", rule: ["required"], msg: ["openid不能为空"] },
					{ name: "mobile", rule: ["required", "isMobile"], msg: ["请输入手机号", "请输入正确的手机号码"] },
					{ name: "verifyCode", rule: ["required"], msg: ["请输入验证码"] },
				];
				let msg = form.validation(formData, rules);
				if (msg) {
					errorModal(null, "错误提示", msg);
					return
				}

				_that.om.request('wechatMp/bindingMobile', formData, 'POST').then(res => {
					if (res.succeed) {
						_that.successMsg = "绑定成功！";
					} else {
						_that.failMsg = "绑定失败！" + res.msg;
					}
				})
			},

		}
	};

</script>

<style scoped>
	.check-box {
		margin-top: 10px;
		position: relative;
		overflow: hidden;
		font-size: 16px;
	}

	.check {
		float: left;
		margin: 4px 4px 0 10px;
		width: 16px;
		height: 16px;
		display: block;
		background: url("");
		background-size: 16px 16px;
	}

	.check.selected {
		background: url("") no-repeat;
		background-size: 16px 16px;
	}

	.checkdes {
		/* float: left; */
		color: #0faeff;
		line-height: 20px;
	}

	.logo {
		width: 46px;
		height: 46px;
		border-radius: 8px;
		margin: 30px 0 10px 8px;
	}

	.des {
		margin-left: 8px;
	}

	.popup-item {
		text-align: left;
	}

	.sname {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 250px;
	}

	.pcheck {
		width: 18px;
		margin: 3px;
	}

</style>

